@import "../../style/css/style.less";
html,body{
  max-width: 420px;
  margin: auto;
  background-color: #F1F1F1;
}
header{
  width: 100%;
  height: 3em;
  .blg(top,rgba(0,0,0,.8),rgba(0,0,0,0));
  .pf;
  top: 0px;
  left: 0px;
  z-index: 100;
  .img{
    width:6em;
    height: 1.9em;
    .db;
    margin:.7em 1.5em 0;
    .bud(@Mob_logo_green,center center,100% 100%);
  }
}
header:before,header:after{
  content: '';
  clear: both;
  display: table;
}
main{
  .banner{
    width: 100%;
    height: 15em;
    background-color: #e3e3e3;
    .pr;
    div{
      width: 60%;
      height: 8em;
      .pa;
      .cm;
      .tac;
      background: rgba(0,0,0,.3);
      color: @cf;
      .br(3px);
      h1{
        font-size: 1.2em;
        margin-top: 2em;
        margin-bottom: .4em;
      }
      h2{
        font-size: 1em;
        font-weight: 300;
      }
    }
  }
  .details{
    width: 100%;
    >div{
      section{
        font-size: 1.5em;
        color: @c3;
        margin-bottom: 1em;
        .tac;
        p{
          text-indent: unset!important;
          font-size: .8em;
        }
        i{
          width:100%;
          height: 1px;
          .bud('/singlePC/images/PC_line.png',center center,100% 100%);
          .db;
          margin-top: .5em;
        }
      }
    }
    .detail{
      background-color: @cf;
      margin:1.5em 1em;
      padding:1.5em;
      .br(3px);
      .pr;
      .bs(0px 0px 5px 0px #999);
      
      >div{
        z-index: 2;
        .pr;
        p{
        text-indent: 2em;
      }
      }
      >i{
        width: 35%;
        height: 6em;
        .bud('/style/images/text_bg.png',center center,cover);
        .pa;
        right: 0px;
        bottom: 0px;
        z-index: 1;
      }
    }
    .detail-1{
      .video{
        width: 100%;
        height: 14em;
        z-index: 2;
        .pr;
        video{
          width:100%;
          height: 100%;
        }
      }
    }
    .detail-2{
      img{
        width: 100%;
        //height: 14em;
        margin-top: 1em;
      }
    }
    .detail-3{
      >div{
        width: 100%;
        height: 14em;
        .swiper-container{
          width: 100%;
          height: 14em;
        }
      }
    }
  }
}
footer{
  overflow: hidden;
  padding: 0 1em;
  .bud('/style/images/footer_bg.png',center center,cover);
  .pr;
  margin-bottom: 3em;
  .form{
    .pr;
    padding:2em 1em 1em;
    >i{
      width: 5em;
      height: 11em;
      .pa;
      top: 0em;
      left: -2.5em;
      .bud(@fangjin_bg_3,center center,100% 100%);
    }
    section{
      color: @cf;
      margin-bottom: .5em;
      small{
        font-size: .6em;
      }
    }
    input{
      width: 100%;
      height: 2.5em;
      line-height: 2.5em;
      border: none;
      margin-bottom: 1.2em;
      .br(3px);
      padding:0 1em;
      background-color:@cf;
    }
  }
  section{
    font-size: 1.5em;
    color: @c3;
    margin-bottom: 1em;
    .tac;
    p{
      text-indent: unset!important;
      font-size: .8em;
    }
    i{
      width:100%;
      height: 5px;
      .bud(@Single_line,center center,100% 100%);
      .db;
      margin-top: .5em;
    }
  }
  >div{
    width: 100%;
    display: inline-block;
    .pr;
    >div{
      .fl;
      display: inline-block;
      img{
        width: 100%;
      }
    }
    >div{
      .df;
      padding:0 1em;
      >ul{
        width: 80%;
        li{
          line-height: 25px;
          font-size: 10px;
          color: @cf;
        }
      }
      >img{
        width:20%;
        .pr;
        top: -12px;
      }
    }
  }
  >p{
    margin: 2em;
    margin-bottom: 4em;
    .tac;
    color: @cf;
    font-size: 12px;
  }
  >i{
    //width: 5em;
    //height: 11em;
    //.pa;
    //bottom: 8em;
    //right: 0;
    //.bud(@fangjin_bg_2,center center,100% 100%);
  }
  >b{
    width: 100%;
    height: 9em;
    .bud(@Single_bottom,center center,100% 100%);
    .pa;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}
.layer-aside{
  .pf;
  right: 1em;
  bottom: 12em;
  z-index: 100;
  i{
    .db;
    width: 3em;
    height: 3em;
    .br(50%);
    .bud(@aside1,center center,100% 100%);
  }
   .aside0{
    .bud(@luozhai_call,center center,100% 100%);
  }

  .aside2{
    .bud(@aside2,center center,100% 100%);
  }
  .layer-mask {
    .pf;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,.5);
    z-index: 10;
    >div{
      width: 80%;
      height: 25em;
      background: @cf;
      .pa;
      .cm;
      b{
        width: 1em;
        height: 1em;
        .pa;
        right: .5em;
        top: .5em;
        .bud(@close,center center,100% 100%);
        z-index: 1;
      }
      div.title{
        width: 100%;
        height: 11em;
        .blg(left,#B71955,#CA192A);
        color: @cf;
        padding:1em 2em 0;
        .tac;
        font-weight: 300;
        font-size: 1em;
        .pr;
        .img{
          width: 100%;
          height: 5em;
          .bud(@bdbj,center center,100% 100%);
          .pa;
          bottom: 0;
          left: 0;
        }
      }
      div.data{
        margin-top: 1em;
        input{
          width: 80%;
          height: 2.5em;
          line-height: 2.5em;
          margin-top: 1em;
          background-color: #F3F3F3;
          .br(3px);
          padding:0 1em;
          border:none;
          margin-left: 10%;
        }
        input[type='button']{
          .blg(left,#B71955,#CA192A);
          color: @cf;
          margin-top: 1.8em;
        }
      }
    }
  }
}
.layer-button{
  .pf;
  width: 100%;
  max-width: 420px;
  height:3em;
  .df;
  left: 0;
  bottom: 0;
  right: 0;
  margin:0 auto;
  z-index: 101;
  .bud('/style/images/B-01.png',center cener,100% 100%);
  >a{
    width: 50%;
    height: 2em;
    line-height: 2em;
    margin-top: .5em;
    .tac;
    color:@cf;
    .db;
    i{
      width: 1em;
      height: 1em;
      display: inline-block;
      .pr;
      top: 3px;
    }
  }
  .button1{
    border-right: 1px solid @cf;

    i{
      .bud(@button1,center center,100% 100%);
    }
  }
  .button2{
    i{
      .bud(@button2,center center,100% 100%);
    }
  }
}
.animate{
  animation:myanimate .5s;
}
@keyframes myanimate {
  0%{
    .oy(0);
    .tm(translateY(200%));
  }
  100%{
    .oy(1);
    .tm(translateY(0%));
  }
}